<template>
    <div class="test-component" :style="testComponentStyle">
        <span>这是一个测试组件2</span>
        <span class="test-mark">这是组件2的说明：只能修改颜色不可修改文字</span>
    </div>
</template>

<script>
    export default {
        name: "TestComponent2",
        props: {
            // 父组件传参统一对象
            dataJson: {
                type: Object,
                default: {}
            }
        },
        data(){
            return {
                interfaceAttrs:{
                    bgColor:{
                        type:'Color',
                        name:'颜色',
                        default:'#ffa5a5'
                    }
                },
                dynamicData:{}
            }
        },
        computed:{
            testComponentStyle(){
                return `background-color: ${this.dynamicData.bgColor}`
            }
        },
        mounted(){
            this.init()
        },
        methods:{
            init(){
                Object.keys(this.interfaceAttrs).forEach(item => {
                    this.$set(this.dynamicData,item,this.interfaceAttrs[item].default)
                })
                if (this.dataJson && typeof this.dataJson === 'object') {
                    this.dynamicData = {...this.dynamicData, ...this.dataJson}
                }
            },
            // 在父组件调用，用父组件传入的参数更新组件数据
            updateData(data){
                if(data){
                    Object.keys(data).forEach(item => {
                        if(this.interfaceAttrs[item]){
                            this.interfaceAttrs[item].default = data[item]
                            this.dynamicData[item] = data[item]
                        }
                    })
                    this.$forceUpdate()
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .test-component {
        width 100%
        height 100%
        color white
        border-radius 5px
        display flex
        justify-content flex-start
        align-items flex-start
        flex-direction column
        span {
            display inline-block
            &.test-mark{
                color red
                font-size 12px
            }
        }
    }
</style>
